<template>
    <page-container bgColor="#F4F4F4" @lowerCall="lowerIndex">

        <cu-custom :isBack="true" bgColor="bg-white" slot="header">
            <block slot="content">
                <view class="text-center text-black ">搜索结果</view>
            </block>
        </cu-custom>

        <block slot="center">
            <mescroll ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" height="100%">
                <view class="search-items">

                    <view class="searchI">
                        <view class="search-box">
                            <input type="text" value="" placeholder="搜一搜,有好物" class="seach-input" v-model="keyText" @confirm="clickRequest()" confirm-type="send" @input="inputVal" />
                            <image :src="staticImgUrl+'chat/seach-icon.png'" mode="scaleToFill" class="seach-icon"></image>
                        </view>
                        <view class="cancel-text" @click="cancetext">{{tipText}}</view>
                    </view>

                    <view style="margin-top: 30rpx;">
                        <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
                        <menu-tabs v-model="tabIndex" :tabs="tabs" v-if="tabs.length > 5" :fixed="true" :tab-width="142" @change="tabBtn" backColor="transparent" lineColor="red"></menu-tabs>
                        <menu-tabs v-model="tabIndex" :tabs="tabs" v-else :fixed="false" @change="tabBtn" backColor="transparent" lineColor="red"></menu-tabs>
                    </view>

                </view>

                </view>

                <view class="swiperlist-content">

                    <!-- 内容 -->
                    <block v-if="tabIndex==1">
                        <view class="swiper-box-style">
                            <view class="swiper-box-item" v-for="(infos,index) in list" :key='index' @click="tolive(infos)">

                                <block>
                                    <view class="item-icon">
                                        <image :src="infos.image" mode="aspectFill"></image>
                                    </view>
                                    <view class="item-title">{{infos.title}}</view>
                                </block>

                            </view>

                        </view>

                    </block>

                    <!-- 商品 -->
                    <block v-if="tabIndex==0 && listTwo.length > 0">
                        <view class="swiper-box-style">
                            <view class="swiper-box-item" v-for="(itemTwo,indexTwo) in listTwo" :key="indexTwo" @click="todetail(itemTwo)">
                                <view class="item-icon">
                                    <image :src="itemTwo.sku_image" mode="aspectFill"></image>
                                </view>
                                <view class="item-title">{{itemTwo.sku_name}}</view>
                                <view class="item-user">
                                    <view class="user-Info">
                                        <view class="user-name-Two" v-if="itemTwo.promotion_type==1">￥{{itemTwo.discount_price}}</view>
                                        <view class="user-name-Two" v-else>￥{{itemTwo.price}}</view>
                                        <view class="goods-market-price" v-if="itemTwo.promotion_type==1">￥{{ itemTwo.price }}</view>
                                    </view>
                                    <view class="user-hot">
                                        <view class="hot-num-Two">购买</view>
                                    </view>
                                </view>
                            </view>

                        </view>
                    </block>

                    <!-- 用户 -->
                    <block v-if="tabIndex==3">
                        <view class="userItem">
                            <view class="bgw" v-for="(itemThree,indexThree) in listThree" :key='indexThree'>
                                <view class="user-info-bos">
                                    <view class="user-pot">
                                        <image :src="itemThree.headimg" mode=""></image>
                                    </view>
                                    <view class="user-names">{{itemThree.nickname}}</view>
                                </view>
                                <view class="link-btns" v-if="itemThree.is_subscribe==0" @click="addFollowBtn(itemThree)">
                                    +关注
                                </view>
                                <view class="link-btns" v-if="itemThree.is_subscribe==1" @click="delFollowBtn(itemThree)">
                                    已关注
                                </view>
                            </view>
                        </view>
                    </block>

                    <!-- 商铺 -->
                    <block v-if="tabIndex==2">
                        <view class="swiper-box-style">
                            <view class="swiper-box-item" v-for="(itemFour,indexFour) in listFour" :key='indexFour' @click="toShop(itemFour)">

                                <block>
                                    <view class="item-icon">
                                        <image :src="itemFour.logo" mode="aspectFill"></image>
                                    </view>
                                    <view class="item-title">{{itemFour.site_name}}</view>
                                </block>

                            </view>

                        </view>

                    </block>

                </view>

            </mescroll>
        </block>

    </page-container>
</template>
<script>
import swiperlist from './components/swiperlist.vue'
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'Searchinfo',
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 10, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				},
				isLock: false
			},
			tipText: '取消',
			// tabs: ['内容', '商品', '用户', '商铺'],
			tabs: ['商品', '内容', '商铺', '用户'],
			tabIndex: 0,
			keyText: '',
			list: [],
			listTwo: [],
			listThree: [],
			listFour: [],
			show: 0.0,
			list_arr: [],
			notKey: false,
			page: 0
		}
	},

	onLoad() {
		this.keyText = uni.getStorageSync('keyText')

		console.log('读取缓存历史搜索关键字', uni.getStorageSync('keyText'))
		// 读取缓存历史搜索记录
		if (uni.getStorageSync('hisarr')) {
			this.list_arr = uni.getStorageSync('hisarr')
			// console.log("读取缓存历史搜索记录", this.list_arr)
		} else {
			this.list_arr = []
		}
	},
	onShow() {
		if (this.$util.queryObj().tabIndex) {
			this.tabIndex = Number(this.$util.queryObj().tabIndex)
			console.log('this.tabIndex', this.tabIndex)
		}
	},
	onUnload() {
		uni.removeStorageSync('keyText')
	},
	created() {

	},
	methods: {
		delFollowBtn(itemThree) {
			var that = this
			if (!this.$util.isLoginCall()) return false
			uni.showModal({
				title: '温馨提示',
				content: '是否确定取消关注该用户?',
				success: res => {
					if (res.confirm) {
						this.$request.deleteMemberFollow({
							followers_id: itemThree.member_id
						}).then(res => {
							that.$util.tip('取消关注成功')
							this.tabIndex == 2
							that.getMemberSearchList(1, 10)
						})
					}
				}
			})
		},
		addFollowBtn(itemThree) {
			var that = this
			if (!this.$util.isLoginCall()) return false
			this.$request.addFollowsBtn({
				followers_id: itemThree.member_id
			}).then(res => {
				this.$util.tip('关注成功')
				this.tabIndex == 2
				that.getMemberSearchList(1, 10)
			})
		},
		toShop(item) {
			this.$Router.push({
				path: '/shopPages/shop/shop',
				query: {
					site_id: item.site_id
				}
			})

			this.$util.redirectTo('/shopPages/shop/shop', { site_id: item.site_id })

		},
		tolive(item) {
			if (item.type == 'video') {
				this.$util.redirectTo('/livePages/video/video', { video_id: item.id })
			} else {
				this.$util.redirectTo('/livePages/details/details', { content_id: item.id })
			}
		},
		todetail(item) {
			this.$util.redirectTo('/pages/goods/detail/detail', {
				sku_id: item.sku_id
			})
		},
		cancetext() {
			this.keyText = ''
		},
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(page) {
			if (this.tabIndex == 0) {
				this.getGoodsSearchList(1, 10)
			} else if (this.tabIndex == 1) {
				this.getContentSearchList(1, 10)
			} else if (this.tabIndex == 2) {
				this.getShopSearchList(1, 10)
			} else if (this.tabIndex == 3) {
				this.getMemberSearchList(1, 10)
			}
			// this.mescroll.resetUpScroll();
		},
		/* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			// console.log("page",page.num)
			// console.log("this.page",this.page)
			if (this.tabIndex == 0) {
				var pagenum = this.page
				pagenum++
				this.getGoodsSearchList(pagenum, 10)
			} else if (this.tabIndex == 1) {
				var pagenum = this.page
				pagenum++
				this.getContentSearchList(pagenum, 10)
			} else if (this.tabIndex == 2) {
				var pagenum = this.page
				pagenum++
				this.getShopSearchList(pagenum, 10)
			} else if (this.tabIndex == 3) {
				var pagenum = this.page
				pagenum++
				this.getMemberSearchList(pagenum, 10)
			}
		},
		getContentSearchList(page, pages_size) {
			this.$request.search({
				keyword: this.keyText,
				pages: page,
				pages_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length != 0) {

					if (page == 1) {
						this.page = 1
						this.list = res.data.list
					} else {
						this.list = this.list.concat(res.data.list)
						this.page = page
					}
				} else {
					this.list = []
				}
			})
		},
		getGoodsSearchList(page, pages_size) {
			this.$request.searchElse({
				keyword: this.keyText,
				pages: page,
				pages_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length != 0) {

					if (page == 1) {
						this.page = 1
						this.listTwo = res.data.list
					} else {
						this.listTwo = this.listTwo.concat(res.data.list)
						this.page = page
					}
				} else {
					this.listTwo = []
				}
			})
		},
		getMemberSearchList(page, pages_size) {
			this.$request.getMemberSearchList({
				keyword: this.keyText,
				pages: page,
				pages_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length != 0) {

					if (page == 1) {
						this.page = 1
						this.listThree = res.data.list
					} else {
						this.listThree = this.data.listThree.concat(res.list)
						this.page = page
					}
				} else {
					this.listThree = []
				}
			})
		},
		getShopSearchList(page, pages_size) {
			this.$request.getShopSearchList({
				keyword: this.keyText,
				pages: page,
				pages_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length != 0) {

					if (page == 1) {
						this.page = 1
						this.listFour = res.data.list
					} else {
						this.listFour = this.listFour.concat(res.data.list)
						this.page = page
					}

				} else {
					this.listFour = []
				}

			})
		},
		swiperCall(e) {
			this.tabIndex = e.detail.current
		},
		tabBtn(val) {
			this.listTwo = []
			this.tabIndex = val
			if (val == 0) {
				this.getGoodsSearchList(1, 10)
			} else if (val == 1) {
				this.getContentSearchList(1, 10)
			} else if (val == 2) {
				this.getShopSearchList(1, 10)
			} else if (val == 3) {
				this.getMemberSearchList(1, 10)
			}
		},
		lowerIndex() {
			console.log('到底了')
		},
		inputVal(e) {
			this.keyText = e.detail.value
		},
		// 点击搜索
		clickRequest() {
			if (this.keyText == '') {
				this.$util.tip('输入点什么吧~')
				return false
			}
			var arrs = this.list_arr
			var arrnum = arrs.indexOf(this.keyText)
			if (arrnum != -1) {
				arrs.splice(arrnum, 1)
				var newarr = arrs.push(this.keyText)
				JSON.parse(newarr)
			} else {
				var newarr = arrs.push(this.keyText)
				JSON.parse(newarr)
			}
			uni.setStorageSync('hisarr', this.list_arr)
			uni.setStorageSync('keyText', this.keyText)

			if (this.tabIndex == 0) {
				this.getGoodsSearchList(1, 10)
			} else if (this.tabIndex == 1) {
				this.getContentSearchList(1, 10)
			} else if (this.tabIndex == 2) {
				this.getShopSearchList(1, 10)
			} else if (this.tabIndex == 3) {
				this.getMemberSearchList(1, 10)
			}

		}

	},
	mounted() {

	}
}
</script>
<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}

.swiper_group {
    height: 100vh;
}

.fgx {
    width: 100%;
    height: 1rpx;
    background-color: #f4f4f4;
    margin-top: 14rpx;
    margin-bottom: 60rpx;
}

.search-items {
    width: 100%;
    background-color: #ffffff;
    padding-top: 14rpx;
    padding-bottom: 14rpx;

    .searchI {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .search-box {
            width: 600rpx;
            height: 56rpx;
            position: relative;

            .seach-input {
                width: 100%;
                height: 56rpx;
                background: #f4f4f4;
                border-radius: 28px;
                box-sizing: border-box;
                padding: 0 65rpx;
                font-weight: 500;
                color: #aaaaaa;
                font-size: 24rpx;
            }

            .seach-icon {
                width: 24rpx;
                height: 24rpx;
                position: absolute;
                left: 24rpx;
                top: 16rpx;
            }
        }

        .cancel-text {
            width: 100rpx;
            height: 48rpx;
            background: #f4f4f4;
            border-radius: 30rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            text-align: center;
            line-height: 48rpx;
        }
    }

    .search-tip {
        width: 100%;
        margin-top: 50rpx;
        padding-bottom: 50rpx;

        .tip-text {
            text-align: center;
        }

        .tip-one {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        .tip-two {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            padding-top: 13rpx;
        }
    }
}

/deep/.mescroll-uni {
    height: 100% !important;
}

image {
    width: 100%;
    height: 100%;
}

.swiperlist-content {
    width: 100%;

    .swiper-box-style {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 20rpx;
    }

    .swiper-box-item {
        width: 340rpx;
        height: auto;
        background: #ffffff;
        border-radius: 12rpx;
        padding-bottom: 20rpx;
        margin-left: 22rpx;
        margin-bottom: 22rpx;
        position: relative;

        .player-icon {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 18px;
            height: 18px;
            z-index: 9999;
        }

        .item-icon {
            width: 340rpx;
            height: 340rpx;
            border-radius: 12rpx 12rpx 0rpx 0rpx;
        }

        .item-icon image {
            border-radius: 12rpx 12rpx 0rpx 0rpx;
        }

        .item-title {
            width: 317rpx;
            margin: 0 auto;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            padding-top: 20rpx;
        }

        .item-user {
            width: 317rpx;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20rpx;

            .user-Info {
                display: flex;
                align-items: center;

                .user-icon {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 50%;
                }

                .user-icon image {
                    border-radius: 50%;
                }

                .user-name {
                    margin-left: 10rpx;
                    max-width: 120rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .user-hot {
                display: flex;
                align-items: center;

                .hot-Icon {
                    width: 10px;
                    height: 13px;
                    margin-right: 5px;
                }

                .hot-num {
                    max-width: 80rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 20rpx;
                }
            }
        }
    }
}

.user-name-Two {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff364e;
}

.hot-num-Two {
    width: 72rpx;
    height: 38rpx;
    background: linear-gradient(90deg, #ff6744, #fd3b5c);
    border-radius: 19rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 38rpx;
}

.userItem {
    width: 100%;
    background-color: #ffffff;

    .bgw {
        width: 702rpx;
        height: 120rpx;
        background: rgba(244, 244, 244, 0);
        box-shadow: 0rpx 1rpx 0rpx 0rpx #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
    }

    .user-info-bos {
        display: flex;
        align-items: center;

        .user-pot {
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .user-pot image {
            border-radius: 50%;
        }

        .user-names {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ff4840;
        }
    }
}

.link-btns {
    width: 120rpx;
    height: 56rpx;
    background: linear-gradient(90deg, #ff7124, #ff364e);
    border-radius: 28rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 56rpx;
}

.search-tip {
    width: 100%;
    padding-bottom: 50rpx;

    .tip-text {
        text-align: center;
    }

    .tip-one {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
    }

    .tip-two {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        padding-top: 13rpx;
    }
}
.goods-market-price {
    font-size: 20rpx;
    color: #999999;
    font-style: italic;
    text-decoration: line-through;
    padding-left: 20rpx;
}
</style>
